import React, {memo, useEffect, useState} from "react";
import {SAMPLE_TASK, WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {useSelector} from "react-redux";

import "./index.css";
import {deepClone} from "../../common/utils";
import allSelectedPic from "./images/wellsBtn.png";

export default memo(function ResultCallTable(props) {
  const {plateClass} = props;
  const {data} = useSelector(state => ({
    data: state.dataReducer.data
  }));
  const [wells, setWells] = useState(data.wells);  //  96个孔板对象
  let cloneWells = [];
  let plateBackground = "plateTableBackgroundMid";

  useEffect(() => {
    cloneWells = deepClone(wells, cloneWells);
    cloneWells.forEach(item => item.selected = false);
    setWells(cloneWells);
  }, []);

  useEffect(() => {
    let cloneDataWells = [];
    cloneDataWells = deepClone(data.wells, cloneDataWells);
    setWells(cloneDataWells.map(item => ({...item, selected: false})));
  }, [data]);

  return (
    <section className={plateClass || "runPagePlateTable"}>
      <div>
        <div style={{backgroundImage: `url(${allSelectedPic})`}}/>
        <div>
          {
            WELLS_COLUMN.map((col, index) => <div key={col}>{col}</div>)
          }
        </div>
      </div>
      <div>
        {
          WELLS_ROW.map((row, index) => <div key={row}>{row}</div>)
        }
      </div>
      <div>
        {
          wells.map((well, index) => (
            <div key={well.row * 12 + well.col}
                 style={
                   {
                     borderColor: well.selected ? "#fff" : `${SAMPLE_TASK[well.type]}`,
                     backgroundColor: well.show ? `${well.groupColor || "#9E9E9E"}` : null
                   }
                 }
            >
              <div style={well.sampleName ? {backgroundColor: `${well.sampleColor}`, color: "#000"} : null}>{well.sampleName}</div>
              <ul>
                {
                  well.targets.map(target => {
                    let cq = well.lines[target.channelIndex].cq;
                    let left = Math.ceil(target.cutOff?.left /2);
                    let right = Math.ceil(target.cutOff?.right /2);
                    if (cq === -1) {
                      return (<li key={target.name} style={{fontWeight: "bold"}}>/</li>);  //无cq
                    } else if (left > cq) {
                      return (<li key={target.name} style={{fontWeight: "bold", color: "#d01935"}}>+</li>);//cq 小于左值
                    } else if (right < cq) {
                      return (<li key={target.name} style={{fontWeight: "bold", color: "#50e33c"}}>-</li>); //cq 大于 右值
                    } else {
                      return (<li key={target.name} style={{border: "1px solid #000"}}/>);  //有cq值
                    }
                  })
                }
              </ul>
              {
                (well.groupColor && well.show)
                  ? <div style={{backgroundColor: `${well.groupColor}`}} className={plateBackground}/>
                  : null
              }
            </div>
          ))
        }
      </div>
    </section>
  );
});